<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="perCode"
      border
      lazy
      :load="load"
      highlight-current-row
      @current-change="(val)=>{this.currentRow = val}"
      :tree-props="{children: 'children', hasChildren: 'perSon'}"
      ref="table"
    >
      <el-table-column prop="perCode" label="权限Code"></el-table-column>
      <el-table-column prop="perName" label="权限名称"></el-table-column>
      <el-table-column prop="perPcode" label="父Code"></el-table-column>
      <el-table-column prop="perRoute" label="前端路由"></el-table-column>
      <el-table-column prop="perLevel" label="权限层级"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="modifyTime" label="修改时间"></el-table-column>
      <el-table-column label="图标">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.perIcon" />
        </template>
      </el-table-column>
      <el-table-column prop="perType" label="修改时间"></el-table-column>
      <el-table-column prop="perClient" label="所属端"></el-table-column>
      <el-table-column align="center" fixed="right" width="120">
        <template slot="header">
          <el-button
            type="text"
            size="small"
            @click="()=>{this.$refs.table.setCurrentRow(null)}"
          >清空选中</el-button>
          <el-button type="text" size="small" @click="()=>{addDialog=true}">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="del(scope.row)" :loading="loadings.del">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Add :visible.sync="addDialog" :currentRow="currentRow" @addSuccess="refreshRow"></Add>
  </div>
</template>
<script>
import { list,del } from "@/api/permission";
import { Add } from "./components";
export default {
  data() {
    return {
      tableData: [],
      addDialog: false,
      loadings: {
        del: false
      },
      currentRow: undefined
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      list(0).then(res => {
        this.tableData = res.data;
      });
    },
    load(tree, treeNode, resolve) {
      list(null, tree.perCode).then(res => {
        resolve(res.data);
      });
    },
    refreshRow(code) {
      if (code != "0") {
        list(null, code).then(res => {
          this.$set(
            this.$refs.table.store.states.lazyTreeNodeMap,
            code,
            res.data
          );
        });
      } else {
        this.init();
      }
    },
    del(row) {
      this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loadings.del = true;
        del(row.perCode)
          .then(res => {
            this.loadings.del = false;
            this.refreshRow(row.perPcode);
          })
          .catch(err => {
            this.loadings.del = false;
            this.refreshRow(row.perPcode);
          });
      });
    }
  },
  components: {
    Add
  }
};
</script>